{% extends 'base.html' %}

{% block extra-head %}
<link rel="stylesheet" type="text/css"  media="screen" href="{{ MEDIA_URL }}tasks/tasks.css" />
{% endblock %}

{% block title %}Transparency through volunteering{% endblock %}

{% block content %}
<div class="span-5">

<h2>Help make this the most accountable general election ever!</h2>
<script type="text/javascript">
window.onload = function () { document.getElementById('id_first_name').focus(); }
</script>
<p><strong>Who are the candidates in your constituency?  What do they think about issues that matter to you?</strong></p>

<p>Sign up below, and we'll send you emails no more than twice a week, suggesting small things you can do to help answer questions like these. </p>



</p>
{% if form %}
  <form action="" method="post" id="signup">
  <table>
  {{ form.as_table }}
  <tr>
   <td></td>
   <td><input type="submit" value="sign up" /></td>
  </tr>
  <tr>
   <td></td>
   <td class="small"><a href='{% url email_reminder %}'>Lost your login information?</a></td>
  </tr>
  </table>
  </form>
 {% endif %}
<p>
We are a <a href="/aboutus/">handful of volunteers</a> who care about democracy.  We occasionally suggest tasks by email that you might be interested in, <a href="/projects/">such as</a> gathering information on general election candidates. We'll also help you to collaborate with other volunteers in your area.
</p>
<!--<p>
We already know that mySociety wants to gather information on general election candidates, and TheStraightChoice wants you to help them find and share election leaflets. As the election approaches there'll be even more things to do, and you can be part of it.
</p>-->

<p class="small">We will occasionally suggest tasks on behalf of other transparency related groups, but we'll never share your private details with anyone, and we'll never send you more than two emails a week, no matter what.  Read our <a href="/aboutus/#privacy">terms and conditions</a> for more.</p>

</div>

<div class="span-3 last">
<div id="visualization"></div>
<p>We're trying to get volunteers in every part of the UK.  So far, we've recruited <strong>{{ volunteers }}</strong> volunteers in {{ count }} constituencies (out of a total {{ total }}). <a href="/statistics/">Read more about how we're doing</a>. You can also <a href='http://twitter.com/democlub' target="_blank">follow us on Twitter</a> and <a href='http://www.facebook.com/pages/Democracy-Club/316731041785' target="_blank">become a fan on Facebook</a>.</p></p>
<p>
<h3>Recent signups</h3>
{% include "new_signup_list.html" %}
</p>

{% block js %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Value');
  data.addRows(1);
  data.setValue(0, 0, '% complete');
  data.setValue(0, 1, {{percent_complete}});

  // Create and draw the visualization.
  var chart = new google.visualization.Gauge(document.getElementById('visualization'));
  var opts = {redFrom: 90, 
              redTo: 100, 
              yellowFrom: 75,
              yellowTo: 90, 
              greenFrom: 35, 
              greenTo: 75};

   chart.draw(data, opts);
}
google.setOnLoadCallback(drawVisualization);
</script>
{% endblock %}


{% endblock %}
